<!-- 图片列表 -->
<template>
	<div id="Picturelist" class="bg3e8 p15">
		<el-card class="w1200">
			<div class="imgcard">
				<div
					class="imglist"
					v-for="(item, index) in imglist.slice(
						(currentPage - 1) * pageSize,
						currentPage * pageSize
					)"
					:key="index"
				>
					<el-image
						class="img"
						:src="item.img"
						:preview-src-list="item.srcList"
						@click="BusinessCase(item)"
					></el-image>
					<h3>{{ item.title }}</h3>
				</div>
				<div class="Pagers">
					<el-pagination
						:hide-on-single-page="true"
						background
						layout="prev, pager, next"
						prev-text="上一页"
						next-text="下一页"
						:current-page="currentPage"
						:page-size="pageSize"
						:total="totaldata"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import axios from 'axios'
// 例如：import 《组件名称》 from '《组件路径》';
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {},
	props: {Picturesurl: {type: String, required: true}},
	data() {
		// 这里存放数据
		return {
			currentPage: 1,
			pageSize: 9,
			imglist: [],
			totaldata: 0,
			id: 0
		}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		handleSizeChange(val) {
			this.pageSize = val
		},
		handleCurrentChange(val) {
			this.currentPage = val
			this.getPicturelist(this.currentPage)
		},
		getPicturelist(pages) {
			if (this.Picturesurl.indexOf('?') != -1) {
				axios.get(`/api/${this.Picturesurl}&page=${pages}&limit=9`).then(res => {
					this.imglist = res.data
					this.totaldata = res.data.length
				})
			} else {
				axios.get(`/api/${this.Picturesurl}?page=${pages}&limit=9`).then(res => {
					this.imglist = res.data
					this.totaldata = res.data.length
				})
			}
		},
		BusinessCase(e) {
			this.$emit('passfunction', e.id)
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {
		this.getPicturelist(this.currentPage)
	}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#Picturelist {
	width: 100%;
	padding: 25px 0;
	.w1200 {
		background-color: white;
		.imgcard {
			min-height: 500px;
			padding: 25px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			.imglist {
				width: 366px;
				.img {
					width: 100%;
					aspect-ratio: 0.7;
					border: 1px solid;
				}
				h3 {
					text-align: center;
					margin: 10px 0;
					// line-height: 45px;
				}
			}
			.imglist:nth-child(3n + 2) {
				margin: 0 25px;
			}
			.Pagers {
				width: 100%;
				display: flex;
				justify-content: center;
				.el-pagination {
					display: flex;
					padding: 10px 0 0 !important;
					.btn-prev,
					.btn-next {
						padding: 0 10px !important;
						border: 1px solid !important;
					}
					.number {
						border: 1px solid !important;
					}
				}
			}
		}
	}
}
</style>
